<template>
  <Page name="直属下线">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <div class="tabs">
      <div class="tabs-wrap">
          <ui-tabs ref="tabs" :list="channel" :active="tab_id" @choose="changeTab"  :type="center" />
      </div>
    </div>
    <ScrollList :config="config" @bottom="getPage" @pull="pull">
      <div class="dock" >
        <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
        <ul>
          <li  v-for="(item,index) in list" :key="item.bill_id">
            <div class="info">
              <div class="name">
                <p>{{item.name}}</p>
                <img :src="item.level_icon" />
              <!--  <img src="~/assets/img/ic_mine_black.png" /> -->
              </div>
              <div class="status" v-if="tab==1">
                <p>
                  <span :class="item.num > 0 ?'yellow':'red'">{{item.num=="" ? '0' : item.num}}次</span>逾期
                </p>
                <p class="bill-item" v-if="item.status !=0">本期账单-<span :class="item.status==-2?'red':''">{{item.status | statusFilter}}</span></p>
              </div>
            </div>
            <div class="action" v-if="tab == 0">
              <a class="button cancel" @click="applyHandle(item,-1,index)">驳回</a>
              <a class="button ok" @click="applyHandle(item,1,index)">同意</a>
            </div>
          </li>
        </ul>
      </div>
    </ScrollList>
  </Page>
</template>

<script>
import Page from '~/components/page';
import Tabs from '~/components/common/tabs.vue';
import ScrollList from '~/components/ScrollList';
import UILoading from  "~/components/loading";
import UiEmpty from  "~/components/empty";
export default {
  components: {
    Page,
    ScrollList,
    [Tabs.name]:Tabs,
    [UILoading.name]: UILoading,
    UiEmpty
  },
  data(){
    return {
      initLoading:true,
      config:{
        bottom:false,
        pull:false,
        end:false,
      },
      page:1,
      total:1,
      loading:false,
      list:[],
      empty:{
        text:"暂无数据"
      },
      managers:[],

      channel:[
        {
          text:"已通过",
          tab:1,
        },
        {
          text:"待审核",
          tab:0,
        },
        {
          text:"已驳回",
          tab:-1,
        },
      ],
      tab:1,
      tab_id:0,
      center:true
    }
  },
  filters:{
    /**
     * 账单状态，1=已还清，-1=未还清 -2逾期未还，结算到下一期
     */
    statusFilter(value){
      let str = ''
      switch(Number(value)){
        case 1:
          str = '已还清';
          break;
        case -1:
          str = '还款中';
          break;
        case -2:
          str = '已逾期';
          break;
      }
      return str
    }
  },
  mounted(){
    (async ()=>{
      await this.getPage();
    })();
  },
  methods:{
    applyHandle(item,status,index){
      if(this.loading) return false;
      let msg = status == -1 ? '确认驳回该申请？' : '确认同意该会员成为您的下线？';
      this.$alert({
        title:msg,
        cancel:true
      }).then(async ()=>{
        this.loading = true;
        try{
          let {data:rs} = await this.$axios.post('?ct=api&ac=handle_apply',{
            bill_id:item.bill_id,
            status,
          });

          if(rs.code == 0){
            this.$toast('操作成功');
            this.list.splice(index,1);
          }else{
            this.$toast(rs.msg);
          }
        }catch(e){
          this.$error(e);
          this.$toast('网络错误');
        }
        this.loading = false;

      })
    },
    changeTab(item){
      this.config.end=false;
      this.page=1;
      this.loading=false;
      this.list=[];
      this.tab = item.tab;
      this.getPage(true);
    },
    async pull(cb){
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      await this.getPage(true);
      this.$nuxt.$loading.finish();
      cb();
    },
    async getPage(isRefresh){
      if(this.loading || this.config.end) return false;
      this.loading = true;
      try{
        let { data:rs } = await this.$axios.post('?ct=api&ac=sub_list',{
          page:this.page,
          tab:this.tab,
        })
        if(rs.code == 0){
          this.initLoading = false;
          const { data } = rs;
          this.total = Number(data.total);
          if(isRefresh){
             this.list = data.list;
          }else{
            this.list = this.list.concat(data.list);
          }

          if(this.total>this.list.length){
            this.page++;
          }else{
            this.config.end = true;
          }
        }else{
          this.initLoading = false;
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }

      this.loading = false;
    },
  }
}
</script>

<style lang="less" scoped>
.tabs-wrap {
    flex: 1;
    overflow: hidden;
    width: 100%;
    position: fixed;
    top:88px;
    left: 0;

    /deep/ ul {
      margin:0;
    }
    ul {
      width:100%;
      li{
        width:33%;
      }
    }
  }
  .tabs {
    display: flex;
    background-color:#fff;
    height:88px;
    border-bottom:1px solid #efefef;

    .ui-tabs {
        border:none;
      }
  }
 .dock{
   ul{
    li{
      margin-top:30px;
      background: #fff;
      padding:30px 30px;
      .info {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
      }
      .name{
        display: flex;
        align-items: center;
        font-size:32px;
        color:#292929;
        max-width:100%;
        overflow: hidden;
        p {
          flex:1;
          .text-ellipsis();
        }
        img{
          margin-left:10px;
          vertical-align: middle;
          width:94px;
        }
      }
      .status{
        font-size:28px;
        color:#666;
        text-align: right;
        margin-top:4px;
        flex-shrink: 0;
        span.red{
          color:#f05521;
        }
        span.yellow{
          color:#d39b00;
        }
        p:first-child{
          color:#292929;
        }
        p.bill-item{
          margin-top:25px;
        }
      }
    }
  }
 }
 .action {
   margin-top:20px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   .button {
     margin-left:20px;
     display: flex;
     align-items: center;
     justify-content: center;
     width:100px;
     padding:6px 10px;
     border:1px solid #999;
     border-radius:50px;
      &.ok {
        border-color:@color-primary;
        color:@color-primary;
      }
   }
 }
</style>
